<template>
    <div class="detail-container" v-loading="loading">
        <div style="position: absolute;top:200px;left:50%;" v-if="orderInfo.orderState == 10">
            <img :src="zhoufei" />
        </div>
        <el-card shadow="never" style="margin-top: 15px;position: relative">

            <div class="operate-container">
                <i class="el-icon-warning color-danger" style="margin-left: 20px"></i>
                <span class="color-danger">当前合同流转状态：{{orderInfo.orderStateStr}}</span>
            </div>
            <div style="margin-top: 20px">
                <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
                <span class="font-small">基本信息</span>
            </div>
            <el-card shadow="never" style="margin-top:20px;">
                <img src="../../assets/images/yue2.png" v-if="orderInfo.isTimeSure==1" style="position: absolute;left: 10px;top: 57px;z-index: 5;"/>
                <el-form  size="mini" label-width="150px" class="minRoW" :rules="rules">
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="订单编号：">{{orderInfo.orderSn}}</el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="合同公司：">
                                {{orderInfo.fromCompany}}
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="下单日期：">{{orderInfo.createTime}}</el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="订单数量：">{{orderInfo.orderGoodsNumber}}</el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="订单金额：">{{orderInfo.orderAmount}}</el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="业务员：">{{orderInfo.userName}}</el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="物流方式：" style="color:red">{{orderInfo.sendType}}</el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-card>
            <div style="margin-top: 20px">
                <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
                <span class="font-small">收货地址</span>
            </div>
            <el-card shadow="never" style="margin-top:20px;">
                <div style="font-weight: bold;font-size:16px;">{{orderInfo.receiverName}}
                    <span style="padding-left:10px">{{orderInfo.receiverMobile}}</span>
                    <span style="padding-left:10px;font-weight: bold;font-size:16px;">{{orderInfo.addressInfo}}</span>
                </div>

            </el-card>

            <div style="margin-top: 20px">
                <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
                <span class="font-small">商品信息</span>
            </div>
            <el-form size="small" :rules="rules" :model="orderInfo" ref="orderInfo">
                <el-table
                        ref="orderItemTable"
                        :data="orderInfo.orderGoodsData"
                        style="width: 100%;margin-top: 20px" border>
                    <el-table-column label="商品名称" width="180">
                        <template slot-scope="scope">
                            {{scope.row.goodsName}}
                        </template>
                    </el-table-column>
                    <el-table-column label="合同数量"
                                     width="100"  align="center">
                        <template slot-scope="scope">
                            {{scope.row.goodsNum}}{{scope.row.goodsUnit}}
                        </template>
                    </el-table-column>
                    <el-table-column label="已发货数量"
                                     width="100"  align="center">
                        <template slot-scope="scope">
                            {{scope.row.sendNum}}{{scope.row.goodsUnit}}
                        </template>
                    </el-table-column>

                    <el-table-column label="摩叔运费" width="120" align="center">
                        <template slot-scope="scope">
                            <div>{{scope.row.goodsFreight}}</div>
                        </template>
                    </el-table-column>

                    <el-table-column label="运联含税运费" width="120" align="center">
                        <template slot-scope="scope">
                            <el-form-item :prop="`orderGoodsData.${scope.$index}.inputFreight`" :rules="rules.inputFreight" v-if="orderInfo.orderState == 23 && orderInfo.isCanInputFreight">
                                <el-input v-model="scope.row.inputFreight"></el-input>
                            </el-form-item>
                            <span v-else>{{scope.row.inputFreight}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="发货类型" width="120" align="center" >
                        <template slot-scope="scope">
                            {{scope.row.sendType}}
                        </template>
                    </el-table-column>
                    <el-table-column label="发货仓库" width="100" align="center">
                        <template slot-scope="scope">
                            <div>{{scope.row.warehouseName}}<span v-if="scope.row.warehouseNameRemark != ''"> - {{scope.row.warehouseNameRemark}}</span></div>
                        </template>
                    </el-table-column>
                    <el-table-column label="期望发货日期" width="100" align="center">
                        <template slot-scope="scope">
                            <span>{{scope.row.expectSendDate}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="发货紧急度" width="100" align="center" >
                        <template slot-scope="scope">
                            <div>{{scope.row.urgentTypeStr}}</div>
                            <div v-if="scope.row.urgentTypeStr == '必须'">{{scope.row.urgentRemark}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="合同约定时间" width="180" align="center" label-class-name="blurth">
                        <template slot-scope="scope">
                            <span>
                                {{scope.row.timeSureDate}}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column label="预计发货日期" width="200">
                        <template slot-scope="scope">
                            <div style="border-bottom:1px solid #eee;padding:5px 0">
                                <div>预计发货日期：{{scope.row.sendDate1 ? scope.row.sendDate1 : '--'}} </div>
                                <div>预计发货概率：{{scope.row.sendRate1 ?  scope.row.sendRate1+'%' : '--'}}</div>
                            </div>
                            <div style="border-bottom:1px solid #eee;padding:5px 0">
                                <div>预计发货日期：{{scope.row.sendDate2 ? scope.row.sendDate2 : '--'}} </div>
                                <div>预计发货概率：{{scope.row.sendRate2 ?  scope.row.sendRate2+'%' : '--'}}</div>
                            </div>
                            <div style="padding:5px 0">
                                <div>预计发货日期：{{scope.row.sendDate3 ? scope.row.sendDate3 : '--'}} </div>
                                <div>预计发货概率：{{scope.row.sendRate3 ?  scope.row.sendRate3+'%' : '--'}}</div>
                            </div>
                        </template>
                    </el-table-column>

                    <el-table-column label="备注">
                        <template slot-scope="scope">
                            {{scope.row.remark}}
                        </template>
                    </el-table-column>
                </el-table>
                <div style="float: right;margin: 20px" class="price-block">
                    <div style="display: inline-block;">
                        <div class="lab">合计数量：</div>
                        <div class="text" style="font-size:16px;font-weight: bold;color:red">{{orderInfo.orderGoodsNumber}}吨</div>
                    </div>
                    <div style="display: inline-block;">
                        <div class="lab" style="width:150px;">运联含税运费合计：</div>
                        <div class="text" style="font-size:16px;font-weight: bold;color:red">
                            ￥{{orderInfo.orderGoodsData | fifinputFreight}}
                        </div>
                    </div>
                </div>
            </el-form>
        <div style="text-align: center;clear: both;margin-top:20px">
            <el-button type="primary" @click="handleConfirm" :loading="btnLoading" v-if="orderInfo.orderState == 23 && orderInfo.isCanInputFreight">确认提交</el-button>
        </div>
          <div style="margin-top: 20px;clear: both">
            <el-menu :default-active="logTab" class="el-menu-demo" mode="horizontal" @select="handleSelectLog">
              <el-menu-item index="1">操作记录</el-menu-item>
              <el-menu-item index="2">变更记录</el-menu-item>
            </el-menu>
          </div>
          <div style="margin-top:20px;border:1px solid #EBEEF5;padding:20px 20px 0 20px">
            <div>
              <el-timeline>
                <el-timeline-item
                  v-for="(activity, index) in orderLogs"
                  :key="index">
                         <span>
                             <span style="padding-right:10px;">{{activity.created_at}}</span>
                             {{activity.user_name}}：{{activity.content}}
                             <span v-show="activity.remark && activity.remark != ''" style="color:red;padding-left:5px">备注：{{activity.remark}}</span>
                           <!--                             <span v-show="logTab == 1" style="padding-left:5px">耗时：{{activity.time_consuming}}</span>-->
                         </span>
                </el-timeline-item>
              </el-timeline>
              <div style="color:#888;padding:20px;text-align: center;font-size:12px" v-if="orderLogs.length == 0">- 暂无数据 -</div>
            </div>
          </div>
        </el-card>
    </div>
</template>

<script>
    import { mapGetters } from 'vuex'
    import {formatDate} from '@/utils/date';
    import store from '@/store'
    import axios from 'axios'
    import {postTxOrdersprocess, getTxOrdersShow} from '@/api/partner'
    import zhoufei from '@/assets/images/zhuofei.png'
    import {validateCommission} from '@/utils/validate';
    import {showtime} from '@/utils/index'
    const defauleQuitForm={
        driverId:0,
        orderId:'',
        driverName:'',
        driverMobile:'',
        driverCardNo:'',
        deliveryNum:'',
        deliveryRemark:'',
        deliveryTime:'',
        driverChargeUser:'',
    }
    export default {
        name: "customerDetail",
        data(){
            const isvalidateCommission = (rule, value, callback) => {
                if (!validateCommission(parseFloat(value))) {
                    callback(new Error('非负整数或小数'))
                } else if(value > 99999999){
                    callback(new Error('最大值为99999999'))
                }else {
                    callback()
                }
            };
            return{
                roles:store.getters.roles ? store.getters.roles : [],
                loading:false,
                orderId:this.$route.query.id,
                orderInfo:{},
                btnLoading:false,
                rules:{
                    inputFreight:[{required: true, trigger: 'blur' ,message: '此项必填',}],
                },
                zhoufei:zhoufei,
                logTab:'1',
                orderLogs:[],

            }
        },
        computed: {
            ...mapGetters([
                'name',
                'mobile',
                'userId'
            ]),
        },
        created() {
            this.getPageInfo();

        },
        watch:{
            '$route'(to,from){
                this.orderId = this.$route.query.id;
                this.getPageInfo();
            }
        },
        filters: {
            fifinputFreight(list){
                let sum = 0;
                if(list){
                    list.forEach((el)=>{
                        let inputFreight = el.inputFreight ? el.inputFreight : 0;
                        sum = sum + parseFloat(inputFreight)
                    });
                    return sum.toFixed(2)
                }else{
                    return 0
                }
            },
        },
        methods:{
          //切换log类型
          handleSelectLog(key){
            this.logTab = key;
            this.orderLogs = [];
            if(key==1){
              this.orderLogs = this.orderInfo.orderLogs.orderLogByA
            }else if(key == 2){
              this.orderLogs = this.orderInfo.orderLogs.orderLogByB
            }
          },

            //确认提交
            handleConfirm(){
                this.$refs['orderInfo'].validate((valid) => {
                    if (valid) {
                        this.btnLoading = true;
                        let data = {};
                        data.orderId = this.orderId;
                        data.action = 'logisticsEnter';
                        data.goods = [];
                        this.orderInfo.orderGoodsData.forEach((el)=>{
                            data.goods.push({
                                ogId:el.ogId,
                                inputFreight:el.inputFreight
                            })
                        });
                        postTxOrdersprocess(data).then((res)=>{
                            this.btnLoading = false;
                            this.getPageInfo();
                            this.showPalceTime(res.nowTime)
                        }).catch(()=>{
                            this.btnLoading = false;
                        })
                    }
                })
            },
          //显示处理时长
          showPalceTime(nowTime){
            let oldTime = formatDate(new Date(parseInt(this.orderInfo.lastCheckTime*1000)),'MM-dd hh:mm')
            let time = formatDate(new Date(parseInt(nowTime*1000)),'MM-dd hh:mm');
            let countTime = showtime(parseInt(this.orderInfo.lastCheckTime*1000),parseInt(nowTime*1000))
            console.log("time",time)
            console.log("oldTime",oldTime)
            console.log("countTime",countTime);
            this.$alert('<div>此合同于 '+ oldTime +' 流转转您的节点</div><div style="padding:16px 0">您于 '+ time +' 处理完毕。</div><div>此合同在您的节点耗时<span style="font-size:16px;font-weight: bold;color:red;padding-left:5px">'+countTime+'</span></div>', '流转统计', {
              showConfirmButton:false,
              dangerouslyUseHTMLString: true,
              closeOnClickModal:true,
            })
            setTimeout(function() {
              let a = document.body.getElementsByClassName("v-modal")[0];
              a.click();
            }, 6000);
          },

            //获取合同详情
            getPageInfo(){
                this.loading = true;
                getTxOrdersShow({orderId:this.orderId}).then(res=>{
                    this.orderInfo = res;
                    this.handleSelectLog(this.logTab);
                    this.loading = false;
                });
            },
        }
    }
</script>

<style  lang="scss">
    .detail-container {
        width: 90%;
        padding: 20px 20px 20px 20px;
        margin: 20px auto;
        .el-card__header{
            background: #f8f8f8;
            .kehu-name{
                display: inline-block;
                font-size:14px;
                vertical-align: middle;
            }
            .kehu-label{
                font-size:12px;
                vertical-align: middle;
                display: inline-block;
                margin-left:15px;
                color: #409eff;
                background: #ecf5ff;
                border: 1px solid #b3d8ff;
                height:24px;
                line-height: 24px;
                padding:0 10px;
                border-radius: 5px;
            }
            .kehu-info{
                text-align: right;
                font-size: 12px;
                color:#333;
                line-height: 20px;
                span{
                    padding-left:16px;
                }
            }
        }
        .operate-container {
            background: #F2F6FC;
            height: 80px;
            margin: -20px -20px 0;
            line-height: 80px;
        }
    }
    .price-block{
        font-size:12px;
        line-height:30px;
        .lab{
            display: inline-block;
            width:100px;
            text-align: right;
        }
        .text{
            display: inline-block;
        }
    }
    .minRoW .el-form-item{
        margin-bottom:5px;
    }
    .red-form{
        .el-form-item__label{
            color:red
        }
    }
    .tongJitable{
        border-left:1px solid #EBEEF5;
        border-top:1px solid #EBEEF5;
        font-size:12px;
        margin-bottom:20px;
        td{
            border-right:1px solid #EBEEF5;
            border-bottom:1px solid #EBEEF5;
            div.tddiv{
                min-height: 30px;
                line-height: 30px;
                padding:0 5px;
                text-align: center;
                white-space:  nowrap
            }
        }
        .bgtd{
            background: #f5f7fa;
        }
    }

    .title-tab{
        border-radius: 8px;
        background: #eee;
        margin-left: 10px;
        display: inline-block;
        vertical-align: middle;
        line-height: 20px;
        padding: 0 5px;
        color: #666;
    }
    .blurth{
        background:#e21717;
        color:#fff
    }
</style>
